<template>
  <div class="fitting-container">
    <el-tabs v-model="activeTop" type="card" @tab-click="handleTop" editable>
      <el-tab-pane label="项目1" name="1"></el-tab-pane>
    </el-tabs>
    <div class="fitting-top" style="margin-top:6px;">
      <div class="fitting-top-left group-border" style="padding:0 6px 6px 6px;">
        <div class="list-items" style="padding:10px 0;">
          <div class="list-title list-title-pad10">曲线序号：</div>
          <el-select v-model="value" placeholder="">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-button type="warning" style="margin-left:10px;">清除</el-button>
        </div>
        <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="35vh">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="浓度值" align="center" width="100" fixed>
            <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
          </el-table-column>
          <el-table-column label="反应值" align="center">
            <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fitting-top-center">
        <div class="group-border" style="padding:0 6px 6px 6px;">
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="list-items">
                  <div class="list-title list-title-pad10">反应值变换：</div>
                  <el-select v-model="value" placeholder="">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="list-items">
                  <div class="list-title list-title-pad10">小数位数：</div>
                  <el-select v-model="value" placeholder="">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="list-items">
                  <div class="list-title list-title-pad10">浓度值变换：</div>
                  <el-select v-model="value" placeholder="">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="list-items">
                  <div class="list-title list-title-pad10">小数位数：</div>
                  <el-select v-model="value" placeholder="">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="list-group">
            <div class="list-items">
              <div class="list-title list-title-pad10">拟合算法：</div>
              <el-select v-model="value" placeholder="">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div class="list-group">
            <div class="list-items">
              <div class="list-title list-title-pad10">分段点位：</div>
              <el-select v-model="value" placeholder="">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div class="list-group">
            <div class="list-items">
              <div class="list-title list-title-pad10">第1段次数：</div>
              <el-select v-model="value" placeholder="">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
          <div class="list-group">
            <el-button type="primary">自动选中</el-button>
            <el-button type="success">自动排序</el-button>
            <el-button type="primary">保存</el-button>
            <el-button>拟合</el-button>
          </div>
        </div>
      </div>
      <div class="fitting-top-right group-border" style="padding:0 6px 6px 6px;">
        <div class="fitting-title">拟合结果</div>
        <div class="list-group">
          <div class="list-items">
            <div class="list-title list-title-pad10">R=</div>
            <el-input placeholder="" v-model="value" style="width: 50%;"></el-input>
          </div>
        </div>
        <el-tabs v-model="activeTop" type="card" @tab-click="handleTop">
          <el-tab-pane label="系数" name="1"></el-tab-pane>
          <el-tab-pane label="反应值偏差" name="2"></el-tab-pane>
          <el-tab-pane label="浓度值偏差" name="3"></el-tab-pane>
          <el-tab-pane label="实验批量评估" name="4"></el-tab-pane>
        </el-tabs>
        <div class="group-border-top scrollbar" style="height:25vh;"></div>
      </div>
    </div>
    <div class="fitting-top" style="margin-top:6px;">
      <div class="fitting-bottom-left group-border">
        <div class="eacharts-group" id="eachartFitting" style="height:40vh;"></div>
      </div>
      <div class="fitting-bottom-right">
        <div class="group-border" style="padding:0 6px 6px 6px;">
          <div class="fitting-title">批量反求</div>
          <div class="list-group">
            <el-button type="danger">清除</el-button>
            <el-button type="success">反应值->浓度值</el-button>
            <el-button type="primary">浓度值->反应值</el-button>
          </div>
          <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" height="30vh">
            <el-table-column label="反应值" align="center" width="100" fixed>
              <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="浓度值" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { isNumber } from 'lodash';
export default {
  name: 'fitting',
  data() {
    return {
      activeTop: '1',
      value: '',
      options: [{ value: '1', label: '1' }, { value: '2', label: '2' }],
      tableData: [],
      checked: false
    };
  },
  mounted() {
    this.eachartSing([{ planNum: 10, signInDate: 30 }]);
  },
  methods: {
    handleTop(e) {

    },
    eachartSing(list) {
      var dom = document.getElementById('eachartFitting');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      let option = {
        legend: {
          data: ['计划人数', '签到人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: list.map(o => o.signInDate)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '计划人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.planNum)) ? Number(o.planNum) : 0))
          },
          {
            name: '签到人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.signInNum)) ? Number(o.signInNum) : 0))
          }
        ]
      };
      myChart.setOption(option);
    },
  }
};
</script>

<style lang="less">
.fitting-container {
  padding: 0 10px;

  .fitting-top {
    display: flex;

    .fitting-top-left {
      width: 25%;
    }

    .fitting-top-right {
      width: 50%;
    }

    .fitting-top-center {
      width: 50%;
      width: 25%;
      padding: 0 10px;
    }
  }

  .fitting-bottom-left {
    width: 65%;
  }

  .fitting-bottom-right {
    width: 30%;
    padding-left: 10px;
  }

  .list-group {
    padding: 6px 0;
  }

  .list-items {
    display: flex;
    align-items: center;
  }

  .list-title {
    font-size: 13px;
    color: #333;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
  }

  .list-title-right {
    text-align: right;
  }

  .list-title-pad10 {
    padding-right: 10px;
    min-width: 90px;
  }
  .fitting-title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .group-border {
    border: 1px solid #eee;
    border-radius: 6px;
  }
  .el-tabs__header {
    margin: 0;
  }
  .group-border-top {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-radius: 0 0 6px 6px;
    padding: 6px;
  }
}
</style>